<template>
  <div class="app-container">
    <el-card class="box-card" header="微信菜单操作">
      <el-row>
        <el-col :span="3">
          <el-button type="primary" @click="getWxMenu">查询菜单</el-button>
        </el-col>
        <el-col :span="3">
          <el-button type="success" @click="createWxMenu">创建菜单</el-button>
        </el-col>
        <el-col :span="3">
          <el-button type="danger" @click="deleteWxMenu">删除菜单</el-button>
        </el-col>
      </el-row>
      <p>
        {{ msg }}
      </p>
    </el-card>
  </div>
</template>

<script>
import { mapGetters } from "vuex";
import { getMenu, createMenu, deleteMenu } from "@/api/wechat";

export default {
  name: "Menu",
  data() {
    return {
      msg: "",
    };
  },
  computed: {
    ...mapGetters(["uid"]),
  },
  components: {},
  created() {},
  methods: {
    getWxMenu() {
      getMenu().then((res) => {
        this.msg = res;
        this.$message.success("查询菜单成功!");
      });
    },
    createWxMenu() {
      const data = {
        flag: "create",
      };
      createMenu(data)
        .then((res) => {
          this.msg = res;
          if (res.errcode == 0) {
            this.$message.success("创建菜单成功");
          } else {
            this.$message.success(res.errmsg);
          }
        })
        .catch((error) => {
          console.log(error);
        });
    },
    deleteWxMenu() {
      const data = {
        flag: "delete",
      };
      deleteMenu(data)
        .then((res) => {
          console.log(res);
          this.msg = res;
          if (res.errcode == 0) {
            this.$message.success("删除菜单成功");
          } else {
            this.$message.error("删除菜单失败");
          }
        })
        .catch((error) => {
          console.log(error);
        });
    },
  },
};
</script>

<style lang='scss' scoped>
</style>